<template>
	<div class="Help">
		<Header active="5" />
		<!-- banner -->
		<div class="page_banner" :style="'background-image:url(' + cateInfo.image + ')'">
			<div class="page-inner">
				<h1 class="f60 font-b">{{cateInfo.name}}</h1>
			</div>
		</div>
		<!-- tabs -->
		<Tabs :tabsList="navList" />
		<!-- inner -->
		<div class="page-inner page-padding wrap">
			<div class="message">
				<h1 class="font-m f36">留言</h1>
				<el-form :model="form" label-width="auto">
					<el-form-item>
						<el-col :span="11">
							<el-input v-model="form.uname" placeholder="名字" style="height: 60px" />
						</el-col>
						<el-col :span="2"> </el-col>
						<el-col :span="11">
							<el-input v-model="form.lastname" placeholder="姓氏" style="height: 60px" />
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-col :span="11">
							<el-input v-model="form.emails" placeholder="電子郵件" style="height: 60px" />
						</el-col>
						<el-col :span="2"> </el-col>
						<el-col :span="11">
							<el-input v-model="form.mobile" placeholder="電話連絡人（可選）"
								style="height: 60px" />
						</el-col>
					</el-form-item>
					<el-form-item>
						<el-input v-model="form.companys" placeholder="公司（可選）" style="height: 60px" />
					</el-form-item>
					<el-form-item>
						<el-input v-model="form.remark" :rows="7" type="textarea" placeholder="告訴我們您需要什麼"
							resize="none" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" color="#1e9da8" @click="onSubmit"
							style="height: 60px;width: 37%;">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="contact">
				<h1 class="font-m f36">{{contactInfo.title}}</h1>
				<p class="font-r f16 address">
					<span class="font-m">地址: </span>{{contactInfo.content}}
				</p>
				<ul>
					<li class="flex" v-for="(i, index) in contactList" :key="index">
						<div class="title_box">
							<i :style="{ backgroundImage: `url(${i.icon})` }"></i>
							<span class="f16 font-m">{{ i.title }}</span>
						</div>
						<span class="f16 font-l text">{{ i.text }}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getCloumnList,
		getArticleLists,
		getCategoryList,
		messageAdd
	} from '@/api/sections'
	export default {
		props: ['active'],

		data() {
			return {
				dataList: [],
				navList: [],
				contactInfo: {},
				contactList: [{
						icon: "/cn/images/contact01.svg",
						title: "維護人員:",
						text: ""
					},
					{
						icon: "/cn/images/contact02.svg",
						title: "電話:",
						text: ""
					},
					{
						icon: "/cn/images/contact03.svg",
						title: "電子郵件:",
						text: "",
					},
				],
				cateInfo: {},
				form: {
					uname: "",
					lastname: "",
					emails: "",
					mobile: "",
					companys: "",
					remark: "",
				}
			}
		},
		methods: {
			onSubmit() {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9.]+\.([a-zA-Z]{2,4})$/;
				if (!reg.test(this.form.emails)) {
					ElMessage({
						message:'Please enter the correct email address',
						type: 'error'
					});
					return
				};

				messageAdd(this.form).then((res) => {
					if (res.code == 1) {
						this.form = {
							uname: "",
							lastname: "",
							emails: "",
							mobile: "",
							companys: "",
							remark: "",
						}
						ElMessage({
							message: res.msg,
							type: 'success'
						});
					} else {
						ElMessage({
							message: res.msg,
							type: 'error'
						});
					}
				})


			},
		},
		mounted: function() {

			getCloumnList({
				'id': 1439
			}).then((res) => {
				console.log(res, 1111)
				this.navList = res.data

			})

			getCategoryList({
				'cid': 1439
			}).then((res) => {
				console.log(res, 1111)
				this.cateInfo = res.data

			})

			getArticleLists({
				'cid': 1440,
				ext: 'content,text1,link1,text2,link2,text3,link3',
				mid: 17
			}).then((res) => {

				this.contactInfo = res.data[0]
				this.contactList[0].text = this.contactInfo.text1
				this.contactList[1].text = this.contactInfo.text2
				this.contactList[2].text = this.contactInfo.text3

			})

		}
	}
</script>